<div class="table-top">
	<div class="table-operations clearfix ">
		<div class="pull-left" *ngIf="disableAdd" nz-popover [nzContent]="disableAddContent">
			<button nz-button nzType="primary" class="btn-add" (click)="createLayer(createTemplate)" [disabled]="true">
				<i class="fas fa-plus"></i>绑定层
			</button>
		</div>
		<div class="pull-left" *ngIf="!disableAdd" >
			<button nz-button nzType="primary" class="btn-add" (click)="createLayer(createTemplate)" >
				<i class="fas fa-plus"></i>绑定层
			</button>
		</div>
		
	</div>
</div>
<nz-table #nzTable [nzData]="layerList" [(nzPageSize)]="pageSize" [(nzPageIndex)]="pageNo" nzShowSizeChanger
	[nzTotal]="totalCount" [nzShowTotal]="rangeTemplate" [nzLoading]="isLogLoading" [nzFrontPagination]="false"
	(nzPageIndexChange)="getLayerList()" (nzPageSizeChange)="getLayerList()" class="table-fixed" [nzNoResult]="noResult"
	[nzHideOnSinglePage]="totalCount <= 10" [nzShowQuickJumper]="true" [nzShowSizeChanger]="true"
	style="margin-bottom: 20px;">
	<thead>
		<tr>
			<th>层名称</th>
			<th>优先级</th>
			<th>版本</th>
			<th>描述</th>
			<th>运行环境</th>
			<th>操作</th>
		</tr>
	</thead>
	<tbody>
		<ng-template ngFor let-data [ngForOf]="nzTable.data">
			<tr>
				<td>{{data.layerName || '--'}}</td>
				<td>{{data.priority || '--'}}</td>
				<td>{{data.version || '--'}}</td>
				<td>{{data.description || '--'}}</td>
				<td>
					<div class="lay-tag" *ngFor="let runtimes of data.runtimes">
						{{runtimes}}
					</div>
				</td>
				<td class="table-opt">
					<a (click)="unBindLayer(data)">解绑</a>
				</td>
			</tr>
		</ng-template>
	</tbody>
	<ng-template #noResult>
		<table-no-result-add title="抱歉，你还没有绑定层！" action="去绑定" (actionClick)="createLayer(createTemplate)">
		</table-no-result-add>
	</ng-template>
	<ng-template #rangeTemplate let-range="range" let-total>
		共{{total}}条
	</ng-template>
</nz-table>
<!-- 绑定层 -->
<ng-template #createTemplate>
	<nzi-form [formName]="bindLayerForm" #bindLayerFormComponent>
		<form nz-form [formGroup]="bindLayerForm">
			<nz-form-item>
				<nz-form-label>层名称<span class="required-icon">*</span></nz-form-label>
				<nz-form-control [nzSpan]="12">
					<nz-select formControlName="layerName" nzShowSearch nzPlaceHolder="请选择层名称"
						(ngModelChange)="changeLayerList($event)">
						<nz-option *ngFor="let item of layerNameList" [nzLabel]="item.layerName" [nzValue]="item.layerId">
						</nz-option>
					</nz-select>
				</nz-form-control>
			</nz-form-item>
			<nz-form-item>
				<nz-form-label>层版本<span class="required-icon">*</span></nz-form-label>
				<nz-form-control>
					<nz-select formControlName="layerVersion" nzShowSearch nzPlaceHolder="请选择层版本"
					(ngModelChange)="changeLayerVersion($event)">
						<nz-option *ngFor="let item of layerVersionList" [nzLabel]="item.version" [nzValue]="item.versionId">
						</nz-option>
					</nz-select>
				</nz-form-control>
			</nz-form-item>
			<nz-form-item>
				<nz-form-label>运行环境</nz-form-label>
				<nz-form-control>
					<ng-container *ngIf="layerRuntime">
						<div class="lay-tag" *ngFor="let runtimes of layerRuntime">
							{{runtimes}}
						</div>
					</ng-container>
					<ng-container *ngIf="!layerRuntime">
						{{ '--' }}
					</ng-container>
				</nz-form-control>
			</nz-form-item>
			<nz-form-item>
				<nz-form-label>描述</nz-form-label>
				<nz-form-control>
					{{layerDescription  || '--'}}
				</nz-form-control>
			</nz-form-item>
		</form>
	</nzi-form>
</ng-template>